<div class="row">
    <div class="col-md-12">

        <div class="box">

            <div class="box-header with-border">
                <h3 class="box-title">进出记录</h3>
            </div>

            <div class="box-body table-responsive no-padding">
                <table id="dt_basic" class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找ID"/>
                            </label>
                        </th>
                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="商品ID"/>
                            </label>
                        </th>
                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找USASIN"/>
                            </label>
                        </th>
                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找USSKU"/>
                            </label>
                        </th>
                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找CASKU"/>
                            </label>
                        </th>
                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找UKSKU"/>
                            </label>
                        </th>

                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找JPSKU"/>
                            </label>
                        </th>
                        <th class="hasinput">
                            <label>
                                <input type="text" class="form-control" placeholder="查找USFNSKU"/>
                            </label>
                        </th>
                        <th class="hasinput">
                        </th>
                        <th class="hasinput">
                        </th>
                        <th class="hasinput">
                        </th>
                        <th class="hasinput">
                        </th>
                        <th class="hasinput">
                        </th>
                    </tr>
                    <tr>
                        <th>进出记录ID</th>
                        <th>商品ID</th>
                        <th>USASIN</th>
                        <th>USSKU</th>
                        <th>CASKU</th>
                        <th>UKSKU</th>
                        <th>JPSKU</th>
                        <th>USFNSKU</th>
                        <th>图片</th>
                        <th>进库/出库</th>
                        <th>库存变化</th>
                        <th>总库存</th>
                        <th>操作时间</th>
                        <th>操作员</th>
                    </tr>
                    </thead>
                </table>

            </div>


        </div>
    </div>
</div>

<div class="modal fade" id="img" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body"
                 id="div_src">
                <img id="img_src" class="center-block img-responsive"  src="" alt="">
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<script>

    $(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        var otable = $('#dt_basic').DataTable({
            "rowCallback": function (nRow) {

            },
            "dom": 'lBrtip',
            "lengthChange": false,
            "sScrollX": "100%",
            "sScrollXInner": "110%",
            "bScrollCollapse": true,
            "processing": true,
            "serverSide": true,
            "bDeferRender": true,
            "paging": true,//开启表格分页
            "order": [[0, "desc"]],
            "ajax": {
                url: '/stock/getRecord',
                type: 'GET'
            },
            "columns": [
                {"data": "id", 'name': 'id', "width": "5%"},
                {"data": "goods_id", 'name': 'goods_id', "width": "6%"},
                {"data": "asin", 'name': 'asin', "width": "6%"},
                {"data": "sku", 'name': 'sku', "width": "6%"},
                {"data": "casku", 'name': 'casku', "width": "6%"},
                {"data": "uksku", 'name': 'uksku', "width": "6%"},
                {"data": "jpsku", 'name': 'jpsku', "width": "6%"},
                {"data": "fnsku", 'name': 'fnsku', "width": "6%"},
                {"data": "goods_img_url", 'name': 'goods_img_url', "width": "6%"},
                {"data": "type", 'name': 'type', "width": "6%"},
                {"data": "value", 'name': 'value', "width": "6%"},
                {"data": "stock", 'name': 'stock', "width": "6%"},
                {
                    "data": 'create_time', 'name': 'create_time', "width": "8%",
                },

                {
                    "data": null, 'name': 'user_user_id', "orderable": false, "width": "5%"
                }
            ],
            "columnDefs": [
                {
                    "targets": 8,
                    "orderable": false,
                    "data": "goods_img_url",
                    "render": function (data, type, row, meta) {
                        if (!data) {
                            return '<img class="center-block" height="66px" width="66px" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2440262118,2742320497&fm=27&gp=0.jpg"  alt="194x228">'
                        } else {
                            return '<img class="center-block img-responsive" height="66px" width="66px" src="http://img.susan.jiandanshang.com/upload/w_66/' + data + '">';
                        }

                    }
                },
                {
                    "targets": 9,
                    "data": "type",
                    "render": function (data, type, row, meta) {
                        if (data > 0) {
                            return '入库'
                        }
                        return '出库';
                    }
                },
                {
                    "targets": 10,
                    "data": "value",
                    "render": function (data, type, row, meta) {
                        if (row.type > 0) {
                            return "<span class='label  btn-danger'>+" + data + "</span>"
                        }
                        return "<span class='label  btn-primary'>-" + data + "</span>"
                    }
                },
                {
                    "targets": 13,
                    "data": "user",
                    "render": function (data, type, row, meta) {
                        if (data.user) {
                            return data.user.username
                        }
                        return '';
                    }
                }

            ],
            language: {
                "sProcessing": "处理中...",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });
        /* END BASIC */


        $(".hasinput .form-control").on('keyup change', function () {
            otable.column($(this).parent().parent().index() + ':visible')
                .search(this.value)
                .draw();

        });

        $('#dt_basic').on('click', 'img', function () {
            $("#img_src").attr("src", $(this).attr("src").replace(/_66/, "_500"));
            $("#div_src")[0].className = ''
            $('#img').modal()
        });
    });


</script>
